<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item prop="nickName">
				<el-input v-model="state.queryForm.nickName" placeholder="昵称"></el-input>
			</el-form-item>
			<el-form-item prop="mobile">
				<el-input v-model="state.queryForm.mobile" placeholder="手机号"></el-input>
			</el-form-item>
			<el-form-item prop="account">
				<el-input v-model="state.queryForm.account" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item prop="birthday">
				<el-date-picker v-model="state.queryForm.birthday" value-format="YYYY-MM-DD HH:mm:ss"
					type="datetimerange" start-placeholder="出生日期" end-placeholder="结束日期" clearable />
			</el-form-item>
			<el-form-item prop="gender">
				<el-select v-model="state.queryForm.gender" placeholder="性别">
					<el-option label="全部" value=""></el-option>
					<el-option label="男" value="0"></el-option>
					<el-option label="女" value="1"></el-option>
					<el-option label="未知" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="email">
				<el-input v-model="state.queryForm.email" placeholder="邮箱"></el-input>
			</el-form-item>
			<el-form-item prop="wechatId">
				<el-input v-model="state.queryForm.wechatId" placeholder="微信号"></el-input>
			</el-form-item>
			<!-- <el-form-item prop="lastLoginTime">
				<el-select v-model="state.queryForm.lastLoginTime" placeholder="最后登录时间">
					<el-option label="选择" value="0"></el-option>
				</el-select>
			</el-form-item> -->
			<!-- 选择最后登录时间 -->
			<el-form-item prop="createTime">
				<el-date-picker v-model="state.queryForm.lastLoginTime" value-format="YYYY-MM-DD HH:mm:ss"
					type="datetimerange" start-placeholder="最后登录查询开始时间" end-placeholder="最后登录查询开始时间" clearable />
			</el-form-item>
			<el-form-item prop="status">
				<el-select v-model="state.queryForm.status" placeholder="账号状态">
					<el-option label="全部" value=""></el-option>
					<el-option label="停用" value="0"></el-option>
					<el-option label="正常" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="deleted">
				<el-select v-model="state.queryForm.deleted" placeholder="账号删除状态 ">
					<el-option label="全部" value=""></el-option>
					<el-option label="正常" value="0"></el-option>
					<el-option label="已删除" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="forumPermission">
				<el-select v-model="state.queryForm.forumPermission" placeholder="论坛权限">
					<el-option label="全部" value=""></el-option>
					<el-option label="禁用" value="0"></el-option>
					<el-option label="正常" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="commentPermission">
				<el-select v-model="state.queryForm.commentPermission" placeholder="评论权限">
					<el-option label="全部" value=""></el-option>
					<el-option label="禁用" value="0"></el-option>
					<el-option label="正常" value="1"></el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item prop="createTime">
				<el-date-picker v-model="state.queryForm.createTime" value-format="YYYY-MM-DD HH:mm:ss"
					type="datetimerange" start-placeholder="创建时间" end-placeholder="结束日期" clearable />
			</el-form-item>
			<el-form-item prop="updateTime">
				<el-date-picker v-model="state.queryForm.updateTime" value-format="YYYY-MM-DD HH:mm:ss"
					type="datetimerange" start-placeholder="更新时间" end-placeholder="结束日期" clearable />
			</el-form-item> -->
			<el-form-item>
				<el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<el-space>
			<el-space>
				<el-button icon="Plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-space>
			<el-space>
				<el-button plain icon="Download" @click="downloadHandle('/kyy/user/export')">导出</el-button>
			</el-space>
			<el-space>
				<el-button icon="Delete" plain type="danger" @click="deleteBatchHandle()">批量删除</el-button>
			</el-space>
		</el-space>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border class="layout-table"
			style="margin-top: 15px;" show-overflow-tooltip @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="nickName" label="昵称" header-align="center" align="center" width="120"
				fixed="left"></el-table-column>
			<el-table-column prop="mobile" label="手机号" header-align="center" align="center"
				width="120"></el-table-column>
			<el-table-column prop="account" label="账号" header-align="center" align="center"
				width="120"></el-table-column>

			<el-table-column label="头像" header-align="center" align="center" width="100">
				<template #default="scope">
					<el-avatar v-if="scope.row.avatar" :src="scope.row.avatar" :size="60" class="user-avatar"
						@click="previewAvatar(scope.row)"></el-avatar>
					<el-avatar v-else icon="UserFilled" :size="60" class="user-avatar"
						@click="previewAvatar(scope.row)"></el-avatar>
				</template>
			</el-table-column>

			<el-table-column prop="realname" label="真实姓名" header-align="center" align="center"
				width="100"></el-table-column>
			<el-table-column prop="birthday" label="出生日期" header-align="center" align="center"
				width="120"></el-table-column>

			<el-table-column label="性别" header-align="center" align="center" width="80">
				<template #default="scope">
					<el-tag v-if="scope.row.gender === 0" type="primary" size="large">男</el-tag>
					<el-tag v-else-if="scope.row.gender === 1" type="danger" size="large">女</el-tag>
					<el-tag v-else type="info" size="large">未知</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="email" label="邮箱" header-align="center" align="center" width="150"></el-table-column>
			<el-table-column prop="wechatId" label="微信号" header-align="center" align="center"
				width="120"></el-table-column>
			<el-table-column prop="lastLoginIp" label="最后登录IP" header-align="center" align="center"
				width="120"></el-table-column>
			<el-table-column prop="lastLoginTime" label="最后登录时间" header-align="center" align="center"
				width="160"></el-table-column>

			<el-table-column label="用户状态" header-align="center" align="center" width="80">
				<template #default="scope">
					<el-tag v-if="scope.row.status === 1" type="success" size="large">正常</el-tag>
					<el-tag v-else type="danger" size="large">停用</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="论坛权限" header-align="center" align="center" width="80">
				<template #default="scope">
					<el-tag v-if="scope.row.forumPermission === 1" type="success" size="large">正常</el-tag>
					<el-tag v-else type="danger" size="large">禁用</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="评论权限" header-align="center" align="center" width="80">
				<template #default="scope">
					<el-tag v-if="scope.row.commentPermission === 1" type="success" size="large">正常</el-tag>
					<el-tag v-else type="danger" size="large">禁用</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="禁言状态" header-align="center" align="center" width="120">
				<template #default="scope">
					<!-- 发言权限：0：禁用 1:正常 -->
					<div v-if="scope.row.commentPermission === 0">
						<el-tag type="danger" size="large">禁言中</el-tag>
						<div class="silence-time" @click="showSilenceDetails(scope.row)">
							点击查看详细
							<el-icon class="view-icon">
								<View />
							</el-icon>
						</div>
					</div>
					<el-tag v-else type="success" size="large">正常</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="删除状态" header-align="center" align="center" width="80">
				<template #default="scope">
					<el-tag v-if="scope.row.deleted === 0" type="success" size="large">正常</el-tag>
					<el-tag v-else type="danger" size="large">已删除</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"
				width="160"></el-table-column>
			<el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"
				width="160"></el-table-column>

			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="320">
				<template #default="scope">
					<el-space wrap size="medium">
						<el-tooltip content="编辑用户信息" placement="top">
							<el-button type="primary" size="default" circle @click="addOrUpdateHandle(scope.row.id)">
								<el-icon>
									<Edit />
								</el-icon>
							</el-button>
						</el-tooltip>

						<el-tooltip :content="scope.row.status === 1 ? '禁用用户' : '启用用户'" placement="top">
							<el-button :type="scope.row.status === 1 ? 'warning' : 'success'" size="default" circle
								@click="updateUserStatus(scope.row)">
								<el-icon>
									<!-- {{ scope.row.id }} -->
									<Lock v-if="scope.row.status === 1" />
									<Unlock v-else />
								</el-icon>
							</el-button>
						</el-tooltip>

						<el-tooltip :content="scope.row.forumPermission === 1 ? '禁用论坛权限' : '启用论坛权限'" placement="top">
							<el-button :type="scope.row.forumPermission === 1 ? 'warning' : 'success'" size="default"
								circle @click="toggleForumPermission(scope.row)">
								<el-icon>
									<ChatDotRound />
								</el-icon>
							</el-button>
						</el-tooltip>

						<el-tooltip :content="scope.row.commentPermission === 1 ? '禁用评论权限（默认5分钟）' : '解除评论权限'"
							placement="top">
							<el-button :type="scope.row.commentPermission === 1 ? 'danger' : 'success'" size="default"
								circle @click="toggleCommentPermission(scope.row)">
								<el-icon>
									<Comment />
								</el-icon>
							</el-button>
						</el-tooltip>

						<el-tooltip content="设置禁言时间" placement="top">
							<el-button :type="isUserSilenced(scope.row) ? 'danger' : 'info'" size="default" circle
								@click="showSilenceDialog(scope.row)">
								<el-icon>
									<Mute />
								</el-icon>
							</el-button>
						</el-tooltip>

						<el-tooltip content="删除用户" placement="top">
							<el-button type="danger" size="default" circle @click="deleteBatchHandle(scope.row.id)">
								<el-icon>
									<Delete />
								</el-icon>
							</el-button>
						</el-tooltip>
					</el-space>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="state.page" :page-sizes="state.pageSizes" :page-size="state.limit"
			:total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle"
			@current-change="currentChangeHandle">
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" v-model:visible="addOrUpdateVisible"
			@refreshDataList="getDataList"></add-or-update>

		<!-- 禁言设置弹窗 -->
		<el-dialog v-model="silenceDialogVisible" title="设置禁言时间" width="400px">
			<el-form :model="silenceForm" label-width="100px">
				<el-form-item label="禁言时长">
					<el-radio-group v-model="silenceForm.durationType">
						<el-radio :label="1">按小时</el-radio>
						<el-radio :label="2">按天数</el-radio>
						<el-radio :label="3">永久</el-radio>
						<el-radio :label="0">解除禁言</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="时长" v-if="silenceForm.durationType !== 3 && silenceForm.durationType !== 0">
					<el-input-number v-model="silenceForm.duration" :min="1"
						:max="silenceForm.durationType === 1 ? 24 : 365"></el-input-number>
					<span class="duration-unit">{{ silenceForm.durationType === 1 ? '小时' : '天' }}</span>
				</el-form-item>

				<el-form-item label="禁言原因">
					<el-input v-model="silenceForm.reason" placeholder="输入禁言原因" type="textarea" :rows="3"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="silenceDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitSilence">确定</el-button>
			</template>
		</el-dialog>

		<!-- 禁言时间原因详情弹窗 -->
		<el-dialog 
			v-model="silenceDetailsVisible" 
			title="禁言详情" 
			width="400px"
			@close="handleDialogClose"
		>
			<div v-if="currentUser">
				<el-descriptions :column="1" border>
					<el-descriptions-item label="用户昵称">{{ currentUser.nickName }}</el-descriptions-item>
					<el-descriptions-item label="账号">{{ currentUser.account }}</el-descriptions-item>
					<!-- <el-descriptions-item label="禁言开始时间">{{ formatDateTime(new Date()) }}</el-descriptions-item>
					<el-descriptions-item label="禁言结束时间">{{ formatDateTime(currentUser.silenceEndTime)
					}}</el-descriptions-item> -->
					<el-descriptions-item label="剩余时间">{{ getSilenceRemainingTime }}</el-descriptions-item>

					<el-descriptions-item label="禁言原因">{{ currentUser.commentBanReason || '无' }}</el-descriptions-item>
				</el-descriptions>

				<div style="margin-top: 20px; text-align: center;">
					<el-button type="primary" @click="showSilenceDialog(currentUser)">修改禁言</el-button>
					<el-button @click="silenceDetailsVisible = false">关闭</el-button>
				</div>
			</div>
		</el-dialog>

		<!-- 头像预览弹窗 -->
		<el-dialog v-model="avatarPreviewVisible" :title="`${currentUser?.nickName || '用户'}的头像`" width="350px"
			class="avatar-preview-dialog">
			<div class="avatar-preview-container">
				<img v-if="currentUser?.avatar" :src="currentUser.avatar" class="avatar-preview-image" />
				<el-avatar v-else icon="UserFilled" :size="200" class="avatar-preview-default"></el-avatar>
			</div>
		</el-dialog>
	</el-card>
</template>

<script setup lang="ts" name="KyyUserIndex">
import { timeUtils } from '@/utils/timeUtils'
import { useCrud } from '@/hooks'
import { reactive, nextTick, ref, computed, watch, onUnmounted } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import { Edit, View, Delete, Lock, Unlock, ChatDotRound, Comment, Mute } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useUpdateUserStatusApi,useUpdateUserForumStatusApi,useUpdateUserCommentStatusApi,useGetSilenceRemainingTime } from '@/api/kyy/user'

const state: IHooksOptions = reactive({
	dataListUrl: '/kyy/user/page',
	deleteUrl: '/kyy/user',
	queryForm: {
		nickName: '',
		mobile: '',
		account: '',
		birthday: '',
		gender: '',
		email: '',
		wechatId: '',
		lastLoginTime: [],
		status: '',
		deleted: '',
		forumPermission: '',
		commentPermission: '',
		createTime: '',
		updateTime: ''
	}
})

const queryRef = ref()
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateVisible.value = true
	nextTick(() => addOrUpdateRef.value.init(id))
}

// 添加用户类型接口
interface UserType {
	id: number | string
	nickName?: string
	account?: string
	avatar?: string
	silenceEndTime?: string
	silenceReason?: string
	commentBanReason?: string
}

// 在 script setup 中添加或修改以下代码
const currentUser = ref<UserType | null>(null)
const isGetSilenceRemainingTime = ref(false)
const getSilenceRemainingTime = ref<string | null>(null)
const timerRef = ref<number | null>(null)
const silenceDetailsVisible = ref(false)//禁言时间原因详情弹窗是否显示 true表示显示 false表示隐藏

// 修改 watch 的实现
watch(isGetSilenceRemainingTime, (newValue) => {
	if (newValue && currentUser.value) {
		// 清除可能存在的旧定时器
		if (timerRef.value) {
			clearInterval(timerRef.value)
		}
		// 立即执行一次
		getSilenceRemainingTimeHandle(currentUser.value)
		// 设置新的定时器
		timerRef.value = window.setInterval(() => {
			if (currentUser.value) {
				getSilenceRemainingTimeHandle(currentUser.value)
			}
		}, 1000)
	} else {
		// 当值为 false 时，清除定时器
		if (timerRef.value) {
			clearInterval(timerRef.value)
			timerRef.value = null
		}
	}
})

// 修改 showSilenceDetails 函数
const showSilenceDetails = (row: UserType) => {
	silenceDetailsVisible.value = true
	currentUser.value = row
	isGetSilenceRemainingTime.value = true
	getSilenceRemainingTimeHandle(row)
}

// 修改 handleDialogClose 函数
const handleDialogClose = () => {
	isGetSilenceRemainingTime.value = false
	silenceDetailsVisible.value = false
}

// 修改获取禁用所剩时间的处理函数
const getSilenceRemainingTimeHandle = (row: UserType) => {
	useGetSilenceRemainingTime(row.id)
		.then((res: any) => {
			if (res.code === 0) {
				// getSilenceRemainingTime.value = res.data
				const timeObject = timeUtils.secondsToTimeObject(res.data)
				getSilenceRemainingTime.value = `${timeObject.years}年${timeObject.days}天${timeObject.hours}小时${timeObject.minutes}分钟${timeObject.seconds}秒`
			}
		})
		.catch((error) => {
			ElMessage.error(`操作失败: ${error.message}`)
		})
}

// 在组件卸载时清除定时器
onUnmounted(() => {
	if (timerRef.value) {
		clearInterval(timerRef.value)
		timerRef.value = null
	}
})

// 更新用户状态
const updateUserStatus = (row: any) => {
	useUpdateUserStatusApi(row.id).then((res) => {
		if (res.code === 0) {
			ElMessage.success('更新用户状态成功');
			//更新列表
			getDataList();
		}
	}).catch((error) => {
		ElMessage.error(`操作失败: ${error.message}`)
	})
}

// 切换论坛权限
const toggleForumPermission = (row) => {
	//发布论坛权限：0：禁用 1：正常
	const newPermission = row.forumPermission === 1 ? 0 : 1
	const permissionText = newPermission === 1 ? '启用' : '禁用'

	ElMessageBox.confirm(`确定要${permissionText}该用户的论坛权限吗？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		// 此处应调用后端API更新用户权限
		useUpdateUserForumStatusApi(row.id).then((res) => {
			if (res.code === 0) {
				ElMessage.success(`${permissionText}成功`)
				row.forumPermission = newPermission // 前端更新状态
				getDataList() // 刷新列表
			}
		}).catch(error => {
			ElMessage.error(`${permissionText}失败: ${error.message}`)
		})
	}).catch(() => {
		// 用户取消操作
	})
}

// 切换评论权限
const toggleCommentPermission = (row) => {
	const newPermission = row.commentPermission === 1 ? 0 : 1
	const permissionText = newPermission === 1 ? '启用' : '禁用'

	ElMessageBox.confirm(`确定要${permissionText}该用户的评论权限吗？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		// 此处应调用后端API更新用户权限
		useUpdateUserCommentStatusApi(row.id).then((res) => {
			if (res.code === 0) {
				ElMessage.success(`${permissionText}成功`)
				row.commentPermission = newPermission // 前端更新状态
				getDataList() // 刷新列表
			}
		}).catch(error => {
			ElMessage.error(`${permissionText}失败: ${error.message}`)
		})
	}).catch(() => {
		// 用户取消操作
	})
}

// 禁言相关
const silenceDialogVisible = ref(false)
const silenceForm = reactive({
	userId: null,
	durationType: 1, // 1: 小时, 2: 天, 3: 永久, 0: 解除
	duration: 1,
	reason: '',
})

// 显示禁言设置对话框
const showSilenceDialog = (row) => {
	currentUser.value = row
	silenceForm.userId = row.id
	silenceForm.durationType = 1
	silenceForm.duration = 1
	silenceForm.reason = ''
	silenceDialogVisible.value = true
}

// 提交禁言设置
const submitSilence = () => {
	let endTime = null

	if (silenceForm.durationType === 0) {
		// 解除禁言
		endTime = null
	} else if (silenceForm.durationType === 3) {
		// 永久禁言
		endTime = new Date('2099-12-31T23:59:59')
	} else {
		// 按时间禁言
		const now = new Date()
		endTime = new Date(now)

		if (silenceForm.durationType === 1) {
			// 按小时
			endTime.setHours(endTime.getHours() + silenceForm.duration)
		} else {
			// 按天
			endTime.setDate(endTime.getDate() + silenceForm.duration)
		}
	}

	// 调用API设置禁言
	axios.post('/kyy/user/setSilence', {
		id: silenceForm.userId,
		silenceEndTime: endTime ? endTime.toISOString() : null,
		silenceReason: silenceForm.reason
	}).then(() => {
		ElMessage.success(silenceForm.durationType === 0 ? '已解除禁言' : '设置禁言成功')
		if (currentUser.value) {
			// 更新前端状态
			currentUser.value.silenceEndTime = endTime ? endTime.toISOString() : null
			currentUser.value.silenceReason = silenceForm.reason
		}
		silenceDialogVisible.value = false
		getDataList() // 刷新列表
	}).catch(error => {
		ElMessage.error(`操作失败: ${error.message}`)
	})
}

// 检查用户是否处于禁言状态
const isUserSilenced = (row) => {
	return row.silenceEndTime && new Date(row.silenceEndTime) > new Date()
}

// 头像预览
const avatarPreviewVisible = ref(false)

// 预览头像
const previewAvatar = (row) => {
	currentUser.value = row
	avatarPreviewVisible.value = true
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, downloadHandle, reset } = useCrud(state)
</script>

<style scoped>
.layout-query .el-form-item {
	margin-bottom: 15px;
}

.layout-table {
	margin-top: 15px;
}

/* 操作按钮样式优化 */
.el-button.is-circle {
	transition: all 0.3s ease;
	width: 40px !important;
	height: 40px !important;
}

.el-button.is-circle .el-icon {
	font-size: 18px;
}

.el-button.is-circle:hover {
	transform: scale(1.1);
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 表格样式优化 */
:deep(.el-table) {
	border-radius: 8px;
	overflow: hidden;
}

:deep(.el-table__header) {
	background-color: #f5f7fa;
}

:deep(.el-table__row:hover) {
	background-color: #f0f9ff !important;
}

/* 状态标签样式 */
:deep(.el-tag) {
	width: 42px;
	text-align: center;
}

/* 按钮组样式 */
.el-space {
	flex-wrap: wrap;
	justify-content: center;
}

/* 操作列样式 */
:deep(.el-table .cell) {
	line-height: normal;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* 头像样式 */
.user-avatar {
	border: 2px solid #eaeaea;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
	cursor: pointer;
}

.user-avatar:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 禁言时间样式 */
.silence-time {
	font-size: 12px;
	color: #F56C6C;
	margin-top: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.silence-time:hover {
	text-decoration: underline;
}

.view-icon {
	margin-left: 4px;
	font-size: 12px;
}

/* 头像预览样式 */
.avatar-preview-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.avatar-preview-image {
	max-width: 100%;
	max-height: 300px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-preview-default {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 禁言表单样式 */
.duration-unit {
	margin-left: 8px;
	color: #606266;
}
</style>
